<template>
  <div>
    <table>
      <tr>
        <td>欢迎光临,vue开发收银系统,水果店</td>
      </tr>
      <tr>
        <td>苹果10元/斤,折扣/8折/</td>
      </tr>
      <tr>
        <td>
          请输入你购买的斤数
          <input type="number" v-model="shu" min="0"/>
        </td>
      </tr>
      <tr>
        <td><button @click="app">结账</button></td>
      </tr>
      <tr>
        <td>
          结账单:总价: <span>{{ zhong }}</span> 折后价:<span>{{ zhe }}</span>
          省了<span>{{ sheng }}</span
          >元
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shu: "",
      zhong: "",
      zhe: "",
      sheng: "",
    };
  },
  methods: {
    app() {
      this.zhong = 10 * this.shu;
      this.zhe = 0.8 *this.zhong;
      this.sheng = this.zhong - this.zhe;
    },
  },
};
</script>

<style>
table,
tr,
td {
  border: 1px solid #000;
}
</style>